<template>
    <div class="app-container">
        <div class="dataListBox">
            <div class="TicketsLeft">
                <Tickets style="width: 1em; height: 1em; margin-right: 8px" />
                <div>数据列表</div>
            </div>
            <div>
                <el-button type="primary" @click="addFlashSession">添加</el-button>
            </div>
        </div>
        <el-table :data="tableData" border>
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="秒杀时间段名称" />

            <el-table-column label="每日开始时间">
                <template #default="scoped">
                    {{ scoped.row.createTime ? dayjs(scoped.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column label="到期时间">
                <template #default="scoped">
                    {{ scoped.row.endTime ? dayjs(scoped.row.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column label="上线/下线">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @click="hdSwitchStatus(row)" />
                </template>
            </el-table-column>
            <el-table-column width="260" label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="editFn(row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="deleteFn(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <flashSessionDialog :flashSessionDialogVisible="flashSessionDialogVisible" @cancel="hdCancel" @confirm="hdConfirm"
            :id="editID" :flashSessionForm="flashSessionForm" />


    </div>
</template>

<script setup lang="ts">
import * as http from '@/request/http';
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';
import { Tickets } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import flashSessionDialog from './components/flashSessionDialog.vue';
const flashSessionDialogVisible = ref(false)
const editID = ref(0)
const tableData = ref<IFlashSessionListModel[]>([])
const flashSessionForm = reactive<IFlashCreateParams>({
    id: 0,
    title: '',
    status: 1,
    createTime: '',
    endDate: '',
    startDate: '',
})
let queryList = () => {
    http.flashSession.flashSessionList().then(res => {
        tableData.value = res.data;
    })
}
queryList()

//更改状态
const hdSwitchStatus = (row: IAdvertiseList) => {

    ElMessageBox.confirm(
        '是否要修改该状态 ? ',
        '提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
        }).then(() => {
            http.flashSession.flashSessionUpdateStatus({ id: row.id, status: row.status }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    ElMessage.success('更新成功');
                    queryList()
                } else {
                    row.status = row.status == 1 ? 0 : 1
                    ElMessage.error('更新失败')
                }
            })
        }).catch(() => {
            row.status = row.status == 1 ? 0 : 1
            console.log(row.status);
            ElMessage.success('已取消操作')
            queryList()
        })
}
const editFn = (row: IFlashCreateParams) => {
    editID.value = row.id
    Object.assign(flashSessionForm, row)
    console.log(flashSessionForm);

    flashSessionDialogVisible.value = true
}
const addFlashSession = () => {
    editID.value = 0
    flashSessionDialogVisible.value = true
}
const hdCancel = () => {
    queryList()
    flashSessionDialogVisible.value = false
}
const hdConfirm = () => {
    editID.value = 0
    flashSessionDialogVisible.value = false
}
const deleteFn = (id: number) => {
    ElMessageBox.confirm(
        '是否要修改该状态 ? ',
        '提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
        }).then(() => {
            http.flashSession.flashSessionDeleteById(id).then(res => {
                console.log(res);
                if (res.code == 200) {
                    ElMessage.success('删除成功');
                    queryList()
                } else {
                    ElMessage.error('删除失败')
                }
            })
        }).catch(() => {
            ElMessage.success('已取消操作')
        })
}
</script>

<style scoped>
/* .flashBox {} */
:deep(.cell) {
    text-align: center;
}



.dataListBox {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin: 20px 0;
    padding: 14px;

    .TicketsLeft {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}
</style>